<template>
  <div class="echarts-container">
    <div ref="echarts" class="echarts-content"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'

export default {
  data() {
    return { 
      option:{},
      sheng_option:{}

    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    async initEcharts() {
      const myChart = echarts.init(this.$refs.echarts);
      myChart.on('click', async reg=>{
        // console.log(reg)
        if(reg.name == "大兴安岭地区"){
          myChart.setOption(this.option);
        } else if (reg.name == '黑龙江'){
          if(!Object.keys(this.sheng_option).length){
            // 可以提出去，暂时不处理了
            const sheng_res = await axios({
              method:'get',
              url:'/map-data/province/heilongjiang.json'
            })
            const heilongjiang_data = sheng_res.data
            echarts.registerMap('heilongjiang',heilongjiang_data)
            this.sheng_option = {
              title:{
                text:"点击大兴安岭",
              },
              tooltip:{
                show:false,
              },
              geo:{
                type:'map',
                map:"heilongjiang",
                roam:false,
                label:{
                  show:true,
                },
                itemStyle:{
                  areaColor:"blue",
                  borderColor:'gray'
                }
              },
              series: [{
                data:[],
                geoIndex:0,
                type:'map'
              }],
              visualMap:{
                calculable:false,
              }
            }

          }
          myChart.setOption(this.sheng_option);
          
        } else {
          alert("暂无数据")
        }
      })
      

      //地图矢量数据
      const res = await axios({
        method:'get',
        url:'/map-data/china.json'
      })
      const chinaData = res.data
      // console.log(chinaData)

      // echarts 不是 myChart
      echarts.registerMap('chinaMap',chinaData)

      //随机一个空气质量值
      // const airData = [{name:"北京",value:78},  ....] 
      // const airData = [{name:"黄金",children:[{name:"北京",value:[经，纬]},{name:"武汉",value:[经，纬]}]},{name:"白银",children:[{name:"山东",value:[经，纬]},{name:"安徽",value:[经，纬]}]},  ....]   可以配置 legend
      // 随机获取几个个点，用来展示散点图
      // const scatterData = [{value:[经度，纬度]}]
      const scatterData = []
      const airData = chinaData.features.map(item => {
        const name = item.properties.name
        const value = parseInt(Math.random()*250 + 50)
        if(value>250){
          scatterData.push(item.properties.cp)
        }
        return {
          name,
          value
        }
      })

      this.option = {
        title:{
          text:"点击黑龙江",
          left:5,
          top:5,
          textStyle:{
            color:"blue"
          }
        },
        tooltip:{
          show:true,
          formatter:(arg)=>{
            // console.log(arg)
            return arg.name +":" + arg.value 
          }
        },
        // legend:{   // 散点数据要分类才有意义
        //   right:"5%",
        //   bottom:"5%",
        //   orient:'vertical'
        // },
        geo:{
          type:'map',
          map:"chinaMap", // 可以注册多个地图，此处表示 显示chinaMap 这个数据
          roam:true, // 允许鼠标 放缩、拖动 效果
          // label:{
          //   show:true,  // 各item（省） 是否显示名称
          // },
          zoom:1.0, // 初始化的时候放缩比例
          // center:[113.665412, 34.757975],// 已哪个item（省份）为中心，传坐标值(比如河南)
          // itemStyle:{
          //   areaColor:"blue", // visualMap 有衔接更高
          //   borderColor:'gray' //
          // }
        },
        series: [{ // 地图数据
            data:airData, // 各省份要显示的值
            geoIndex:0, // 关联第几个geo，正常是第一个
            type:'map'
          },
          { //散点图数据
            data:scatterData,  
            type:'effectScatter',
            coordinateSystem:'geo',// 使散点数据可以在地图中显示
            rippleEffect:{
              scale:5, // 是散点涟漪动画变大，让效果更加明显
              brushType:'stroke', // 空心涟漪效果
            }
          }
        ],
        visualMap:{ //visualMap 和 series 配合使用
          min:50,
          max:300,
          inRange:{
            color:['#FFFFFF','#ff0000'] // 颜色渐变的范围
          },
          calculable:true, //左下方出现滑块， 筛选 颜色区域，等于筛选值
        }
      }
      myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
